<style lang="less">
@import "../styles/menu.less";
</style>

<template>
  <Menu ref="sideMenu" :active-name="activeName" :open-names="openNames" :theme="menuTheme" width="auto" @on-select="changeMenu" accordion>
    <template v-for="item in menuList">
      <MenuItem v-if="item.children.length<=1" :name="item.children[0].name" :key="'menuitem' + item.name">
      <Icon :type="item.children[0].icon || item.icon" :class="item.classIcon" :size="iconSize" :key="'menuicon' + item.name"></Icon>
      <span class="layout-text" :key="'title' + item.name">{{ itemTitle(item.children[0]) }}</span>
      </MenuItem>
      <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">
        <template slot="title">
          <Icon :type="item.icon||''" :class="item.classIcon" :size="iconSize"></Icon>
          <span class="layout-text">{{ itemTitle(item) }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem :name="child.name" :key="'menuitem' + child.name">
          <Icon :type="child.icon||''" :class="child.classIcon" :size="iconSize" :key="'icon' + child.name"></Icon>
          <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
          </MenuItem>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script>
import util from "@/libs/util.js";
export default {
  name: 'sidebarMenu',
  props: {
    menuList: Array,
    iconSize: Number,
    menuTheme: {
      type: String,
      default: 'dark'
    },
    openNames: {
      type: Array
    },
  },
  data ()  {
    return {
      activeName: '',
    };
  },
  methods: {
    changeMenu (active)    {
      this.$emit('on-change', active);
    },
    itemTitle (item)    {
      return item.title;
    }
  },
  mounted ()  {

  },
  created ()  {
    this.$watch(function () { return this.$route.name }, function (newValue, oldValue)    {
      this.activeName = newValue
    });
    let pathArr = util.setCurrentPath(this, this.$route.name);
    if (pathArr.length >= 2) {
      // this.changeMenu (pathArr[1].name)()
      // this.$store.commit('app/addOpenSubmenu', pathArr[1].name);
    } else {
      // this.changeMenu (pathArr[0].name)()
    }
    // this.changeMenu (active)()
  },
  watch: {
    // '$route.name': function (val, oldval)    {
  },
  updated ()  {
    this.$nextTick(() =>    {
      if (this.$refs.sideMenu) {
        this.$refs.sideMenu.updateOpened();
      }
      this.activeName = this.$route.name
    });
  }

};
</script>
